<template>
  <section id="informationDisclosure">
    <SpecificData v-if="currentTabName === '供需与约束'"></SpecificData>
    <MarketOperate v-else-if="currentTabName === '市场运营'"></MarketOperate>
    <BetweenProvince v-else-if="currentTabName === '省间现货'"></BetweenProvince>
    <button class="tip-btn" v-else @click="tipFn">Click</button>
    <img class="logo" :src="logoImageUrl" height="50" alt="" />
  </section>
</template>

<script setup lang="ts" name="SpecificData">
import SpecificData from './SpecificData/index.vue'
import MarketOperate from './MarketOperate/index.vue'
import BetweenProvince from './BetweenProvince/index.vue'
import { DomMessageInstance } from "./../utils/DomMessage"
import { useApp } from './index'
import { onMounted } from 'vue'

const tipFn = async () => {
  DomMessageInstance.success({content: '打开具体的页面才能获取具体的数据'})
  const allLog = await self?.LogDB?.getAllData()
  console.log(allLog)
}

const {
    logoImageUrl,
    currentTabName,
    init
  } = useApp()

  onMounted(init)
</script>

<style scoped>
#informationDisclosure {
  z-index: 99999;
  position: fixed;
  bottom: 20px;
  right: 0;
  width: 82px;
  bottom: 5vh;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: transparent;
}

.tip-btn {
  position: absolute;
  margin: auto;
  top: 30px;
  left: 3px;
  cursor: pointer;
}

img {
  display: block;
  width: 60px;
  height: 60px;
  border: 4px solid #c72a21;
  border-radius: 50%;
}
</style>
